<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .div_creat {
        width: 100px;
        height: 200px;
        background-color: brown;
        position: absolute;
    }

    .box {
        width: 500px;
        height: 500px;
        border: 1px solid red;
        float: right;
    }

        .test{
            width: 100px;
            height: 200px;
            background-color: blueviolet;

        }
        .test1{
            width: 100px;
            height: 200px;
            background-color: blueviolet;
            float: right;
        }
</style>

<body>
    <!--第一步-->
    <p class="testP"  >拖动我</p>

    <div class="test"></div>
    <p>jiangge</p>
    <div class="test"></div>
    
    <script>
        var testP = document.querySelectorAll;
        alert(testP)
  
        var test = document.getElementsByClassName('test');
        
        
        //第二步
        testP.addEventListener('dragstart',(e)=>{
            alert(123);
            //通过setData方法 向dataTransfer对象添加一个属性
            //名pid，值为拖动元素的ID
            e.dataTransfer.setData('pid',e.target.class);
            console.log(e.target)
           
        });
        
        //第三步
        test.addEventListener('drop',(e)=>{
            //获取到拖动元素的id
            let data = e.dataTransfer.getData('pid');
            alert(456)
            //通过id获取到拖动元素
            let p = document.getElementsByClassName(data);
            
                test=document.getElementsByClassName("test");
                for (var i = 0; i < test.length; i++) {
                    test[i].index = i;
                    test[i].onclick = function(){
                           
            　               //alert("元素索引为" +this.index);
            test[this.index].appendChild(p);
            }
        }
           
        })
        
        //第四步
        document.addEventListener('dragover',function(e){
             e.preventDefault();
        })
    </script>
</body>

</html>